<template>
  <div class="table">
    <div class="headerBtn">
      <a-form-model layout="inline" :model="pageParams">
          <a-form-model-item label="角色：">
                  <a-select
                    v-model="pageParams.roleId"
                    placeholder="请选择角色"
                  style="width:200px"
                  >
                   <a-select-option
                      value="" >全部</a-select-option>
                    <a-select-option
                      :value="item.roleId"
                      v-for="item in roleList"
                      :key="item.roleId"
                    >
                      {{ item.roleName }}</a-select-option
                    >
                  </a-select>
                </a-form-model-item>

        <a-form-model-item>
          <a-button type="primary" @click="queryList">查询</a-button>
        </a-form-model-item>
      </a-form-model>
      <div style="margin-right:20px">
        <a-button type="primary" @click="add">添加</a-button>
      </div>
    </div>
    <a-table
      :columns="columnsList.columns"
      :data-source="columnsList.datatable"
      :pagination="false"
      :loading="loading"
    >
      <span slot="name" slot-scope="text">{{ text }}</span>
      <span slot="operation" slot-scope="text, record">
        <a-popconfirm
          title="确定要删除吗？"
          ok-text="确定"
          cancel-text="取消"
          @confirm="del(record.roleId,record.userId)"
        >
          <a href="#"> <a-button type="danger" size="small">删除</a-button></a>
        </a-popconfirm>
      </span>
    </a-table>
    <div class="pagination">
      <a-pagination
        v-model="pageParams.pageNum"
        :total="total"
        show-less-items
        @change="PageNumChange"
      />
    </div>
    <!-- 新增 -->
    <addModel
      :addModel="addModel"
      @close="close"
      v-if="addModel.open"
      @refresh="refresh"
    ></addModel>
  </div>
</template>

<script>
import { getRoutesList ,getRoleUsers,deleteRoleUserList} from "@/services/dataApi";
import addModel from "./components/addModel.vue";
export default {
  name: "Table",
  components: {
    addModel,
  },
  data() {
    return {
      addModel: {
        open: false,
        title: "新增",
        kitId: null,
      },
      loading: false,
      total: 0,
      pageParams: {
        roleId:'',
        pageNum: 1,
        pageSize: 10,
 
      },
      roleList:[],
      columnsList: {
        columns: [
          {
            title: "序号",
            dataIndex: "name",
            customRender: function (text, record, index) {
              return parseInt(index) + 1;
            },
            align: "center",
          },
          {
            title: "用户名称",
            dataIndex: "userName",
            key: "userName",
            align: "center",
          },
          {
            title: "手机号码",
            dataIndex: "userPhone",
               key: "userPhone",
            align: "center",
          },
          {
            title: "性别",
            dataIndex: "sex",
            customRender(text, record) {
              return record.sex==1?'男':'女'
            },
            align: "center",
          },
          {
            title: "邮箱",
            dataIndex: "email",
            key: "email",
            align: "center",
          },
          {
            title: "状态",
            dataIndex: "userStatus",
            key: "userStatus",
            align: "center",
             customRender(text, record) {
              return record.sex==1?'启用':'冻结'
            },
          },
          {
            title: "操作",
            dataIndex: "operation",
            scopedSlots: { customRender: "operation" },
            align: "center",
              fixed: "right",
            width: 100,
          },
        ],
        datatable: [],
      },

    };
  },
  created() {
    this.getTableList();
    this.getRoleUsers()
  },
  methods: {
    //获取角色
    getRoleUsers() {
      getRoleUsers().then((res) => {
        if (res.retcode == "success") {
          this.roleList = res.data;
        }
      });
    },
    // 关闭弹框
    close() {
      this.addModel.open = false;
      this.addModel.kitId = null;
    },
    //刷新
    refresh() {
      this.getTableList();
    },

    getTableList() {
      this.loading = true;
      getRoutesList(this.pageParams).then((res) => {
        if (res.retcode == "success") {
          this.loading = false;
          this.columnsList.datatable = res.data.list;
          this.total = res.data.total;
        }
      });
    },
    // 查询
    queryList() {
      this.getTableList();
    },

    // 删除
    del(roleId,userId) {
        deleteRoleUserList({ roleId: roleId ,userId:userId}).then((res) => {
        if (res.retcode == "success") {
          this.$message.success(res.data);
          this.getTableList();
        }
      });
    },
    // 新增
    add() {
      this.addModel.open = true;
      this.addModel.title = "新增";
    },

    // 改变页码
    PageNumChange(page, pageSize) {
      this.pageParams.pageNum = page;
      this.pageParams.pageSize = pageSize;
      this.getTableList();
    },
  },
};
</script>

<style scoped lang="less">
:deep(.ant-form-item-control-wrapper) {
  width: 200px !important;
}

.table {
  background-color: @base-bg-color;
  padding: 24px;
}

.headerBtn {
  display: flex;
  justify-content: space-between;
}

button {
  margin-right: 10px;
}

.pagination {
  height: 60px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.temDown {
  font-size: 16px;
  color: #719dff;
  cursor: pointer;
}
.jyz li {
  display: flex;
  list-style: none;
}
.db {
  display: block;
}
</style>
